<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器</title>
    <style>
        /*2023-1-11：第一遍理解记忆*/
        /*1、元素选择器：
        （1）作用：根据标签名来选中指定元素
        （2）语法：标签名{}
        （3）例子：P{}  h1{} div{}*/
        p{
            color:darkturquoise;
        }

        /*将 秋水共长天一色，设置为红色*/
        /*2、id选择器
        （1）作用：根据元素的id属性值选中一个元素
        （2）语法：#id属性值{}
        （3）例子：#red{}  #box1{}*/
        #red{
            color:red;
        }
        #box1{
            color:chartreuse;
        }

        /*将最后两句话的颜色设置为蓝色*/
        /*3、类选择器
        （1）作用：根据元素的class属性值选中一组元素
        （2）语法：.class属性值*/
        .blue{
            color:blue;
        }
        .abc{
            color:aqua;
        }
        /*4、通配选择器
        （1）作用：选中页面中的所有元素
        （2）语法：*{}*/
        *{
            font-size:30px;
        }
        /*5、交集选择器
        （1）作用：选中同时符合多个条件的元素
        （2）语法：选择器1选择器2选择器3选择器n{}
        （3）注意：交集选择器中如果有元素选择器，必须使用元素选择器开头*/
        /*将class为red的div字体大小设置为50px*/
        div.red{
            font-size: 50px;
        }
        /*6、并集选择器
        （1）作用：同时选中多个选择器对应的元素
        （2）语法：选择器1，选择器2，选择器3，选择器n{}
        （3）例子：#b1,h1,span,p{}*/
        h1,span{
            color:green;
        }
       

    </style>
</head>
<body>
    <span>哈哈哈</span>
    <h1 class="blue abc">大标题</h1>
    <p>少小离家老大回，</p>
    <p>少小离家老大回，</p>
    <p>少小离家老大回，</p>
    <p id="box1">少小离家老大回，</p>
    <p id="red">秋水共长天一色，</p>
    <!--class属性：可以重复使用,通过class属性为元素分组，可以同时为一个元素指定多个class属性-->
    <p class="blue a b c">落霞与孤鹜齐飞。</p>
    <div class="blue">落霞与孤鹜齐飞。</div>
    <div class="red">我是div</div>
    <div class="red">我是p元素</p>

</body>
</html>